<template>
	<el-container v-loading="loading" class="page" style="width: 1100px;">
		<el-main style="padding:0px;">
			<el-form ref="ruleForm" :model="form" :rules="rules" label-width="85px">
				<el-collapse v-model="activeNames">

					<el-collapse-item title="患者资料" name="患者资料">

						<template #title>
							<div class="section-title">患者资料</div>
						</template>

						<el-descriptions :column="4" label-width="80px" border style="padding: 0px 10px 10px;">
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										姓名
									</div>
								</template>
								{{form.ctm_name}}
							</el-descriptions-item>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										手机
									</div>
								</template>
								{{form.ctm_mobile}}
							</el-descriptions-item>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										卡号
									</div>
								</template>
								{{form.ctm_code}}
							</el-descriptions-item>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										档案号
									</div>
								</template>
								{{form.ctm_dangid || '-'}}
							</el-descriptions-item>
						</el-descriptions>
					</el-collapse-item>

					<el-collapse-item title="会员资料" name="会员资料">

						<template #title>
							<div class="section-title">会员资料</div>
						</template>

						<view class="title" style="margin-top: 0px;">
							主卡会员
						</view>

						<div style="padding-left: 15px;">
							<el-card class="card-center">
								<el-icon size="28"><el-icon-user /></el-icon>
								<p>开通主卡会员</p>
							</el-card>
						</div>

						<view class="title">
							家庭成员
						</view>

						<taTableCard :params="params" style="max-height: 420px;" hidePagination rowHeight="120px"
							:cardSize="[6,6,6,6,6]" ref="table" :apiObj="$API.hm4.familyCard.list" row-key="id">
							<template #add>
								<view class="card-center" @click="bindCustomer">
									<el-icon size="36"><el-icon-plus /></el-icon>
									<p>绑定家庭成员</p>
									<selectCustomer ref="selectCustomer"></selectCustomer>
								</view>
							</template>
							<template #default="{item}">
								<view class="member-card">
									<view class="card-left">
										<view class="user-avatar" :class="[item.ctm_sex=='M'?'sex-nan':'sex-nv']">

										</view>
									</view>
									<view style="display: flex;flex-direction: column;">
										<span style="color: #333; font-weight: bold;font-size: 15px;">
											{{item.ctm_name}}
										</span>
										<span style="color: #999999;">{{item.ctm_mobile}}</span>
										<span style="color: #999999;">{{item.ctm_code}}</span>
									</view>
									<el-dropdown class="card-dropdown" trigger="click">
										<el-button type="primary" size="small" icon="ArrowDown" />
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item>
													<el-button size="small" type="success" icon="Link" @click="unbind">
														解绑
													</el-button>
												</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</view>
							</template>
						</taTableCard>
					</el-collapse-item>
				</el-collapse>

				<div style="height:500px;background-color: #fff;">
					&nbsp;
				</div>
			</el-form>
		</el-main>
	</el-container>
</template>

<script>
	import selectCustomer from './selectCustomer.vue';

	export default {
		name: 'customer.show',
		components: {
			selectCustomer
		},
		data() {
			return {
				loading: true,
				activeNames: ['患者资料', '会员资料'],
				params: {
					H_Id: null,
				},
				form: {},
				rules: {
					product_description: [{
						required: true,
						message: '请填写商品详情'
					}]
				}
			}
		},
		created() {
			this.params = {
				H_Id: this.$request('H_Id', 'ea0d2af5-d503-44a3-8cfa-c9f4e07060e1')
			}
		},
		mounted() {
			let _this = this;
			this.customerShow();
		},
		methods: {
			unbind() {
				this.$confirm("确定解绑选中成员吗？", "系统提示", {
					confirmButtonText: "马上解绑",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$showLoading();
					this.$refs.table.upData()
					this.$hideLoading();
				});
			},
			showDev() {
				return this.$message.error("开发中...")
			},
			bindCustomer() {
				this.$refs.selectCustomer.toggleMenu((e) => {
					console.error(e)
				});
			},
			customerShow() {
				this.$API.hm4.customer.show.post(this.params).then(res => {
					this.form = res.data;
					this.loading = false;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.member-card {
		padding: 10px;
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		position: relative
	}

	.member-card:hover .card-dropdown {
		display: block;
	}

	.card-dropdown {
		display: none;
		top: 1px;
		right: 1px;
		position: absolute;
	}

	.title {
		margin: 10px 10px 10px 12px;
		display: inline-block;
		font-weight: bold;
	}

	/*装饰条*/
	.page :deep(.el-collapse-item) {

		.el-collapse-item__content {
			padding-bottom: 0px;
		}

		.el-collapse-item__title {
			position: relative;
			padding-left: 14px;
			margin-left: 10px;
			font-size: 16px;
			color: var(--el-text-color-regular);
		}

		.el-collapse-item__title::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 4px;
			height: 14px;
			background-color: var(--el-color-primary);
			border-radius: 2px;
		}

	}

	.card-center {
		height: 120px;
		width: 250px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		cursor: pointer;

		&:hover {
			color: #409EFF;
		}

	}


	.user-avatar {
		height: 80px;
		width: 80px;
		min-width: 80px;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-right: 0.625rem;
		box-sizing: content-box;
		position: relative;
	}

	.sex-nv {
		background-image: url("");
	}

	.sex-nan {
		background-image: url("");
	}

	.card-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
</style>
